var displayAreaImg = document.querySelector('.displayAreaImg')
var displayArea = document.querySelector('.displayArea');
var shade = document.querySelector('.shade');
var enlargedArea = document.querySelector('.enlargedArea')
var enlargedAreaImg = document.querySelector('.enlargedAreaImg')
//console.log(displayAreaImg, displayArea, shade, enlargedArea, enlargedAreaImg);
function enlarge() {
    //绑定鼠标进入事件1
    displayArea.onmouseover = function () {
        shade.style.display = 'block';
        enlargedArea.style.display = 'block';
    }
    //绑定鼠标离开事件2
    displayArea.onmouseout = function () {
        shade.style.display = 'none';
        enlargedArea.style.display = 'none';
    }
    //绑定鼠标进入事件3
    displayArea.onmousemove = function (e) {
        //获取事件对象
     
        
        var e = e || window.event
        //鼠标居中遮盖层的距离
        var x = e.clientX - 80 - 80 // 只是为了好看
        var y = e.clientY - 80 - 200
  
        
        if (x >= 78) {
            x = 78
        }
        if (x < 0) {
            x = 0
        }0
        if (y >= 78) {
            y = 78
        }
        if (y <= 0) {
            y = 0
        }
        shade.style.left = x + 'px'
        shade.style.top = y + 'px'
        // 大图片的移动距离
        enlargedAreaImg.style.left = -2 * x + 'px'
        enlargedAreaImg.style.top = -2 * y + 'px'
    }
}

// enlarge()

